/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, Button, Image, View, FlatList, ActivityIndicator } from 'react-native';
import NovelSearch from './component/NovelSearch';
import NovelDetail from './component/NovelDetail';
import NovelArticle from './component/NovelArticle';
import NovelIndex from './component/NovelIndex';
import NovelCategory from './component/NovelCategory';
import { createStackNavigator, createBottomTabNavigator, createAppContainer } from "react-navigation";
import Ionicons from 'react-native-vector-icons/Ionicons';
import BookCase from './component/BookCase';
import Storage from './component/Storage';

// const instructions = Platform.select({
//   ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
//   android:
//     'Double tap R on your keyboard to reload,\n' +
//     'Shake or press menu button for dev menu',
// });

class LogoTitle extends React.Component {
  render() {
    return (
      <Image
        source={require('./logo.png')}
        style={{ width: 30, height: 30 }}
      />
    );
  }
}




class SettingsScreen extends React.Component {
  static navigationOptions = {
    title: 'Settings',
  }
  render() {
    const { navigation } = this.props;
    const url = navigation.getParam('url', 'NO-URL');
    const itemId = navigation.getParam('itemId', 'NO-ID');
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Settings Screen {url}  {itemId}</Text>
        <Button
          title="Go to Settings... again"
          onPress={() =>
            this.props.navigation.navigate('Settings', {
              itemId: Math.floor(Math.random() * 100),
            })}
        />
        <Button
            title="Go to Profile"
            onPress={() => this.props.navigation.navigate('Profile')}
          />
      </View>
    );
  }
}

class ProfileScreen extends React.Component {
  static navigationOptions = {
    title: 'Profile'
  }
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Profile Screen</Text>
        <Button
            title="Go to Settings"
            onPress={() => this.props.navigation.navigate('Settings')}
          />
      </View>
    );
  }
}



const HomeStack = createStackNavigator(
  {
    Home: NovelIndex,
    Search: NovelSearch,
    Detail: NovelDetail,
    Category: NovelCategory,
    Article: NovelArticle
  });

const SettingsStack = createStackNavigator({
  Settings: BookCase,
  Profile: ProfileScreen
},{
  navigationOptions: {
    tabBarLabel: '书架',
  },
});

HomeStack.navigationOptions = ({ navigation }) => {
  return {
      tabBarVisible: navigation.state.index < 1,
      tabBarLabel: '首页',
  };
};

const TabNavigator = createBottomTabNavigator(
  {
    Home: HomeStack,
    Settings: SettingsStack,
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-home`;
          // Sometimes we want to add badges to some icons. 
          // You can check the implementation below.
          // IconComponent = HomeIconWithBadge; 
        } else if (routeName === 'Settings') {
          iconName = `ios-bookmarks`;
        }

        // You can return any component that you like here!
        return <IconComponent name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
  }
);

const AppContainer = createAppContainer(TabNavigator)

export default class App extends Component {

  render() {
    return (
      <View style={{flex:1}}>
        <AppContainer />
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    paddingLeft:5,
    paddingRight:5,
    backgroundColor: "#F5FCFF"
  },
  horizontal: {
    flex: 1,
    justifyContent: 'center',
    alignItems: "center",
    flexDirection: 'column',
    padding: 10
  },
  rightContainer: {
    flex: 1,
    alignItems:"flex-start",
    paddingLeft: 10,
  },
  title: {
    fontSize: 18,
    marginBottom: 8
  },
  year: {
    textAlign: "center"
  },
  thumbnail: {
    width: 53,
    height: 81
  },
  list: {
    paddingTop: 20,
    backgroundColor: "#F5FCFF"
  }
});
